Ext.namespace('Ext.ux.form');

Ext.ux.form.FileField = Ext.extend(Ext.form.TriggerField, {
	triggerClass : 'x-form-search-trigger',
	inputFileName : '',
	defaultAutoCreate : {
		tag : "input",
		type : "text",
		size : "10",
		autocomplete : "off"
	},

	// Get the current value of our text field.

	getValue : function() {
		return Ext.ux.form.FileField.superclass.getValue.call(this) || "";
	},

	// Set the current value of our text field.

	setValue : function(text) {
		Ext.ux.form.FileField.superclass.setValue.call(this, text);
	},

	onTriggerClick : function() {
		if (this.disabled) {
			return;
		}
	},

	onRender : function(ct, position) {
		Ext.ux.form.FileField.superclass.onRender.call(this, ct, position);
		this.inputFileEl = this.wrap.createChild({
			tag : 'input',
			type : 'file',
			size : 1, // must be > 0. It's value doesn't really matter due to
						// our masking div (inputFileCt).
			name : this.inputFileName || Ext.id(this.el),
			// Use the same pointer as an Ext.Button would use. This doesn't
			// work in Firefox.
			// This positioning right-aligns the input file to ensure that the
			// "Browse" button is visible.
			style : {
				position : 'absolute',
				cursor : 'pointer',
				right : '0px',
				top : '0px',
				filter : 'alpha(opacity: 0)',
				opacity : 0,
				zIndex : 2,
				width : 1
			}
		});

		this.inputFileEl = this.inputFileEl.child('input') || this.inputFileEl;

		// setup events
		this.inputFileEl.on({
			'click': this.onInputFileClick,
			'change': this.onInputFileChange,
			'focus': this.onInputFileFocus,
			'select': this.onInputFileFocus,
			'blur': this.onInputFileBlur,
			scope : this
		});
	},
	
	/**
	 * Add the visual enhancement to the button when the input file recieves focus. 
	 * This is the tip for the user that now he/she can press space to select the file.
	 * @private
	 */
	onInputFileFocus: function(e){
		if (!this.isDisabled) {
			this.el.addClass("x-btn-over");
		}
	},
	
	/**
	 * Removes the visual enhancement from the button.
	 * @private
	 */
	onInputFileBlur: function(e){
		this.el.removeClass("x-btn-over");
	},
	
	/**
	 * Handler when inputFileEl's "Browse..." button is clicked.
	 * @param {Event} e click event.
	 * @private
	 */
	onInputFileClick: function(e){
		e.stopPropagation();
	},

	/**
	 * Handler when inputFileEl changes value (i.e. a new file is selected).
	 * 
	 * @private
	 */
	onInputFileChange : function() {
		this.setValue(this.inputFileEl.dom.value);
	}
});